proj-poverty 2021-05-22 temp2: 開発メモ
#proj-poverty
/emoji/github.iconhttps://github.com/yuiseki/proto-poverty
手順
Forkする
Cloneする
code:bash
npm ci // エラー出る, npm -g install npm@latest 入れるといけた
npm run dev
http://localhost:3000/
バージョン情報
node.js
v16.1.0
最新ですね
npm
7.8.0
npm v6だと、package-lock.jsonの構造が違うのでエラーになる
npm -g install npm@latest
6.14.12 ですがいけましたsilloi.icon
proj-poverty 2021-05-22 temp2: 開発メモ#60a89aced7d3c30000dc977eこれの解決になるかなtkgshn.icon
/icons/good.iconなりました
システム構成
Next.js, React.js, TypeScript
可視化ライブラリ
recharts
react-graph-vis
CSS
Tailwind CSS
/bubbles スターチャート
src/pages/bubbles.tsx
経済の状況を俯瞰的に把握して認識を共有するための可視化
rechartsで実装されている
/words
src/pages/words.tsx
具体的な悩みなどを俯瞰的に把握するための可視化
いまはワードクラウドだが、共起ネットワークに変えていきたい
react-graph-visでネットワーク可視化しようとしている
ダミーデータで作ってみる
データ
src/data
/proto-poverty
「SNSなどの野良からぼやきを拾ってくる」みたいな案が出ましたtkgshn.icon
proj-poverty 2021-05-22 temp1: コミュニティ#60a8a2ba09c5f20000eb6877
yuiseki.icon やってみたい
ToDo
複数人開発のための整備
README.mdの更新
node, npmのバージョンを明記する
.node_version or .nvmrcを置く等
Tailwind CSSをどこかにまとめたほうが良い？
common.tsにまとめるべき？
code:tsx
const container = css`
height: 98%;
display: flex;
flex-direction: column;
${twm-4 p-4 rounded bg-gray-600}
`;
const headerContainer = css`
height: 15em;
width: 100%;
`;
const innerContainer = css`
height: 100%;
width: 100%;
`;
/bubblesに関して、もっと細かいコンポーネントに分割したい
分担作業がしにくいため
/wordsに関して
/networkでreact-graph-visのデモは動かせている
共起ネットワークのサンプルデータを構築する必要がある
データ構造を共有する必要がある
code:json
{
nodes: [
{
id: number,
label: string,
title: string
}, ...
],
edges: [
{
from: id,
to: id
}
]
}
Next.js, React, Tailwind CSSについて
Next.jsで特殊な点
src/pages/にhoge.tsxというファイルを置いて、export defaultしたReactコンポーネントが、/hogeページとして描画される
以下のふたつのファイルは特殊な存在
src/pages/_app.tsx
src/pages/_document.tsx
Railsで言うところのレイアウトファイルやテンプレートファイル的存在
Next.jsやReact初めての人向け
各自で、自分のページを作ってみる
src/pages/yuiseki.tsxみたいなファイルを置く
Tailwind CSSについては
https://tailwindcss.com/docs
Reactコンポーネントを書いてみる
code:yuiseki.tsx
import Head from "next/head";
import React from "react";
import tw, { css } from "twin.macro";
const container = css`
${twm-10 p-10 rounded bg-yellow-500}
`;
const Yuiseki:React.VFC = () => {
return (
<>
<Head>
<title>貧困可視化プロトタイプ：yuiseki</title>
</Head>
<div css={container}>
<h1>yuiseki</h1>
</div>
</>
)
}
export default Yuiseki;
http://localhost:3000/yuiseki
役割分担
yuiseki.icon
README.mdの更新
VSCode推奨エクステンションの更新
共起ネットワークデータを生成する
Co-occurrence network
edgeの重みが重要ぽい
手順
ドキュメントに同時に登場する二つの単語のペアのリストを作る
ドキュメント全体における各単語間の、Jaccard係数を計算する
otkzh.icon
React/Next.jsはじめて
コードリーディング
なんとなくの理解
next/headとreactとtwin.macroをインポートして
React.VFCをエクスポートする
ao.icon
Tailwind と Next.js経験なし
コードリーディング
silloi.icon
Tailwind と Next.js ともに経験あり
SSG対応
proj-poverty 2021-05-22 temp1: コミュニティからの要望なんですが、⬜ iframeでの埋め込み機能を作るとか可能ですか？tkgshn.icon
proj-poverty 2021-05-22 temp1: コミュニティ#60a8a458eee05d00007d38f7
このWebサイトを他のWebサイトに埋め込むという意味では、可能ですyuiseki.icon
それがグロースエンジンになると考えていますtkgshn.icon
/icons/note-com.icon東京都コロナ対策サイトへの諸々のメモ｜深津 貴之 (fladdict)｜note
OGPでサムネイルを作る
やっていきたいyuiseki.icon
ハマったポイント
$ npm install
一回立ち上げてみようと思ったらこれが必要だったtkgshn.icon
同じくao.icon
code: error
npm WARN prepare removing existing node_modules/ before installation
npm ERR! cipm can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with npm install before continuing.
npm ERR!
npm ERR!
npm ERR! Invalid: lock file's react-konva@17.0.2-0 does not satisfy react-konva@*
npm ERR!
https://gyazo.com/8adb86962bb07a55eb576e6acf8847df
node v16.1.0 / npm 7.11.2 で動作しました😺otkzh.icon